<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title=""
    :footer="null"
    :width="1000"
    :height="600"
    :canFullscreen="false"
    :destroyOnClose="true"
    wrapClassName="stationPopupVideo"
    @height-change="handleHeightChange"
  >
    <div class="content">
      <a-spin size="large" v-if="state.palyUrl === ''" />
      <VideoControl :videoUrl="state.palyUrl" v-else />
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, reactive, provide } from "vue";
import { BasicModal, useModalInner } from "@gui-pkg/antdcomponents";
import VideoControl from "@/components/VideoControl2";
import { getVideoPlayUrl } from "@/api/mapServices/mapData";

defineOptions({ name: "VE" });

const modalHeightValue = ref(680);
const state = reactive({
  palyUrl: "",
});

const [register, { setModalProps }] = useModalInner(async (data) => {
  let { rowData, videoIndex } = data;
  setModalProps({ confirmLoading: false });
  state.palyUrl = "";
  findSelectVideoUrl(rowData, videoIndex);
});

const findSelectVideoUrl = async (videoData, videoIndex) => {
  let videoStcd = videoData.videoStcd;
  if (videoStcd) {
    let videoList = await getVideoPlayUrl({ videoStcd });
    if (videoList && videoList.length) {
      state.palyUrl = videoList[videoIndex].startUrl?.flv;
    }
  } else {
    state.palyUrl = "";
  }
};

// 弹窗高度变化，主要是监听是否点击了全屏
const handleHeightChange = (height: string) => {
  modalHeightValue.value = height;
};
provide("ModalHeightChange", modalHeightValue);
</script>

<style lang="less" rel="stylesheet/less" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<style lang="less" rel="stylesheet/less">
.stationPopupVideo {
  .scrollbar {
    padding: 0 !important;
  }
  .ant-modal-content {
    background-color: rgba(0, 0, 0, 0.6);
  }
  .ant-modal-close-x {
    color: #fff;
  }
}
</style>
